<script setup>
import CameraList from "./cameraList.vue"
import AlgorithmList from "./algorithmList.vue"
import AlarmList from "./alarmList.vue"
import Statistics from "./statistics.vue"

import { ref, reactive, getCurrentInstance, onMounted, watch, markRaw } from "vue"

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

// 生命周期
onMounted(() => {
})

const tabsActive = ref(0);
const componentTabs = reactive([markRaw(CameraList), markRaw(AlgorithmList), markRaw(AlarmList), markRaw(Statistics)]);

const tabsList = reactive([
  {label: "Camera Configuration", value: 0},
  {label: "Algorithm Configuration", value: 1},
  {label: "Alarm Information", value: 2},
  {label: "Alarm Statistics", value: 3},
])

function tabsClick(value){
  tabsActive.value = value;
}

</script>
<template>
  <div class="tabs_page">
    <div 
      class="tabs_item" 
      :class="tabsActive == item.value ? 'tabs_active' : ''" 
      v-for="item in tabsList" 
      :key="item.value"
      @click="tabsClick(item.value, item.component)"
    >
      {{item.label}}
    </div>
  </div>
  <component :is="componentTabs[tabsActive]"></component>
</template>